<template>
	<view class="classlist">
		<view class="content">
			<view @click="pageGoing('/pages/preview/preview')" class="item" v-for="item in themeImages" :key="item.id">
				<image :src="item.picsrc" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		pageGoing
	} from '../../utils/pageGoIng';

	const themeImages = ref([{
			id: "1",
			picsrc: "https://pic2.zhimg.com/v2-d6d0c956d30aa63894cc1cc96901ce07_r.jpg?source=1940ef5c",
		},
		{
			id: "2",
			picsrc: "https://pic1.zhimg.com/v2-5bc1f1dfd6b29a08e521b531cae39fe7_r.jpg?source=1940ef5c",
		},
		{
			id: "3",
			picsrc: "https://pic2.zhimg.com/v2-e95c23e74994209b94628850ed2f8cda_r.jpg?source=1940ef5c",
		},
		{
			id: "4",
			picsrc: "https://bpic.588ku.com/back_pic/23/04/07/343a5d9d820dd30a209cbc641c58960a.png!/fw/750/quality/99/unsharp/true/compress/true",
		},
		{
			id: "5",
			picsrc: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=863211843,1403441120&fm=253&gp=0.jpg",
		},
		{
			id: "6",
			picsrc: "https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=847002296,3134001034&fm=253&gp=0.jpg",
		},
		{
			id: "7",
			picsrc: "https://pic2.zhimg.com/v2-f6311f081a300d5be832ca58335154e4_r.jpg?source=1940ef5c",
		},
		{
			id: "8",
			picsrc: "https://picx.zhimg.com/v2-b20e7482affbbae7bcaaa4f74a0a80ee_r.jpg?source=1940ef5c",
		},
		{
			id: "9",
			picsrc: "https://pic4.zhimg.com/v2-9519d04426501d204c80c88be4012c08_r.jpg?source=1940ef5c",
		}
	])
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}

	}
</style>